<template>
  <div>
    <editor
      v-model="content"
      api-key="7nkk9qzs604p7knsl9yhplemxnsnh4p0qiqezgesoexvvbz7"
      :init="init"
    />
  </div>
</template>
<script>
import editor from '@tinymce/tinymce-vue'

export default {
  name: 'TinyMCE',
  components: { editor },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      content: '',
      init: {
        height: 500,
        menubar: false,
        language: 'zh_CN', branding: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          `preview | formatselect | bold italic link | forecolor  backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent removeformat |  image media | code | undo  | help`,
        contextmenu: 'bold copy '
      }
    }
  },
  watch: {
    value(v) {
      console.log('value')
      console.log(v)
      this.content = this.value
    },
    content(newValue, oldValue) {
      console.log('content')
      console.log(oldValue)
      console.log(newValue)
      this.$emit('input', newValue)
      this.$emit('contentChange', newValue)
    }
    // content: {
    //   set(newValue, oldValue) {
    //     console.log('content set')
    //     console.log(newValue)
    //     console.log(oldValue)
    //   },
    //   get(v) {
    //     console.log('content get')
    //     console.log(v)
    //   }
    // }
  },
  mounted() {
    this.content = this.value
  }
}
</script>
